<template>
  <div class="card-count">
    <head-top head-title="打卡统计" go-back="true"></head-top>
    <div class="count-wrapper">
      <mt-cell title="本周打卡统计" is-link :to="'/WeekCardDetail/'+ $route.params.id"></mt-cell>    
      <mt-cell title="本月打卡统计" is-link :to="'/MonthCardDetail/'+ $route.params.id"></mt-cell>    
      <mt-cell title="上个月打卡统计" is-link :to="'/PrevMonthCardDetail/'+ $route.params.id"></mt-cell>    
      <mt-cell title="上个季度打卡统计" is-link :to="'/PrevQuarter/'+ $route.params.id"></mt-cell>    
      <mt-cell title="近半年打卡统计" is-link :to="'/HalfYear/'+ $route.params.id"></mt-cell>    
      <!-- <mt-cell title="测试" is-link to="/Test"></mt-cell>    -->
      <!-- <a href="/Test" style="display: block;height:100px; color: #ccc; margin-top:50px">测试</a> -->
    </div>
  </div>
</template>

<script>
import headTop from '../../components/header/Header.vue'
export default {
  name: 'CardCount',
  data() {
    return {}
  },
  components: {
    headTop
  }
}
</script>

<style lang='scss'>
  .card-count {
    padding-top: 40px;
    .mint-cell-wrapper{
      background-size: 100% 1px;
    }
    .count-wrapper {
      .mint-cell{
        &:last-child{
          background-size: 100% 0;
        }  
      }
    }
  }
</style>
